<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
    <style type="text/css">
        #controlToggle li {
            list-style: none;
        }
        #options {
            position: relative;
            width: 512px;
        }
        #output {
            float: right;
        }

        /* avoid pink tiles */
        .olImageLoadError {
            background-color: transparent !important;
        }
    </style>
    <script src="../../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, measureControls;
        function init(){
            map = new OpenLayers.Map('map');
            
            var wmsLayer = new OpenLayers.Layer.OSM(); 

            map.addLayers([wmsLayer]);
            map.setCenter(new OpenLayers.LonLat(0,0), 5);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());
            map.addControl(new OpenLayers.Control.ScaleLine({geodesic: true}))
            
            // style the sketch fancy
            var sketchSymbolizers = {
                "Point": {
                    pointRadius: 4,
                    graphicName: "square",
                    fillColor: "white",
                    fillOpacity: 1,
                    strokeWidth: 1,
                    strokeOpacity: 1,
                    strokeColor: "#333333"
                },
                "Line": {
                    strokeWidth: 3,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    strokeDashstyle: "dash"
                },
                "Polygon": {
                    strokeWidth: 2,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    fillColor: "white",
                    fillOpacity: 0.3
                }
            };
            var style = new OpenLayers.Style();
            style.addRules([
                new OpenLayers.Rule({symbolizer: sketchSymbolizers})
            ]);
            var styleMap = new OpenLayers.StyleMap({"default": style});
            
            measureControls = {
                line: new OpenLayers.Control.Measure(
                    OpenLayers.Handler.Path, {
                        geodesic: true,
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                ),
                polygon: new OpenLayers.Control.Measure(
                    OpenLayers.Handler.Polygon, {
                        geodesic: true,
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                )
            };
            
            var control;
            for(var key in measureControls) {
                control = measureControls[key];
                control.events.on({
                    "measure": handleMeasurements,
                    "measurepartial": handleMeasurements
                });
                map.addControl(control);
            }
            
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
            
            document.getElementById('noneToggle').checked = true;
        }
        
        function handleMeasurements(event) {
            var geometry = event.geometry;
            var units = event.units;
            var order = event.order;
            var measure = event.measure;
            var element = document.getElementById('output');
            var out = "";
            if(order == 1) {
                out += "measure: " + measure.toFixed(3) + " " + units;
            } else {
                out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
            }
            element.innerHTML = out;
        }

        function toggleControl(element) {
            for(key in measureControls) {
                var control = measureControls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">OpenLayers Geodesic Measurement & ScaleLine</h1>
    <p id="shortdesc">
        Tests geodesic measurement of distances and areas against a geodesic ScaleLine.
    </p>
    <div id="map" style="width: 512px; height: 300px;"></div>
    <div id="options">
        <div id="output">
        </div>
        <ul id="controlToggle">
            <li>
                <input type="radio" name="type" value="none" id="noneToggle"
                       onclick="toggleControl(this);" checked="checked" />
                <label for="noneToggle">navigate</label>
            </li>
            <li>
                <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
                <label for="lineToggle">measure distance</label>
            </li>
            <li>
                <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
                <label for="polygonToggle">measure area</label>
            </li>
        </ul>
    </div>
    <p>Zoom in so the ScaleLine shows units in the range of 10-100 km. Measure
    the length of the ScaleLine. The result should be approximately the same
    as the distance printed on the ScaleLine.</p>
    <p>Zoom out so the ScaleLine shows units in the range of 100-500 km. Drag
    the map to the South or North and see how the ScaleLine length changes.</p>
  </body>
</html>
